<template>
  <view class="container">
    <view class="head">
      <image src="/static/taotaitupian/neirong.png" mode="" />
    </view>
    <view class="headline">
      <view class="headline_title">线下活动标题</view>
      <view class="headline_des ellipsis2">这里是活动的具体描述，这里是活动的具体描述，这里是这里是活动的具体描述这里是活动的具体描述这里是活这里是活动的具体描述这里是活动的具体描述这里是活
      </view>
      <view class="headline_tag">
        <view class="headline_tag_box">线下沙龙</view>
        <view class="headline_tag_box">互联网内容</view>
      </view>
      <view class="headline_f">
        <view class="headline_f_l">
          <text>￥</text>199
        </view>
        <view class="headline_f_r">
          999人浏览|108人收藏
        </view>
      </view>
    </view>
    <view class="address">
      <view class="address_head">
        <image src="/static/deatils/zhongbiao.png" mode="widthFix"></image>
        <text>2020-09-14 14:00 ~ 2020-09-15 18:00</text>
      </view>
      <view class="address_footer">
        <view class="address_footer_l">
          <image src="/static/deatils/dizhi.png" mode="widthFix"></image>
          <text>陕西省西安市莲湖区大兴路A座3单元2002室</text>
        </view>
        <view class="address_footer_r">
          复制地址
        </view>
      </view>
    </view>
    <view class="user">
      <view class="user_head">活动详情</view>
      <view class="user_des ellipsis2">这里是活动的具体描述，这里是活动的具体描述，这里是这里是活动的具体描述这里是活动的具体描述这里是活这里是活动的具体描述这里是活动的具体描述这里是活</view>
      <view class="user_box">
        <view class="user_box_head">
          <view class="user_box_head_l">
            填写购票人信息
            <image src="/static/deatils/add.png" @tap="showModal" mode=""></image>
          </view>
          <view class="user_box_head_r">
            已添加购票人数: <text>1人</text>
          </view>
        </view>
        <view class="user_box_footer">
          <text>姓名：</text>
          <view>张三</view>
          <text>联系方式：</text>
          <view>18965410000</view>
        </view>
      </view>
    </view>
    <view class="footer_fixed">
      <view class="footer_left">
        <view class="">
          <image src="/static/deatils/shoucang.png" mode="widthFix"></image>
          <text>收藏</text>
        </view>
        <view class="">
          <image src="/static/deatils/fenxiang2.png" mode="widthFix"></image>
          <text>邀请好友</text>
        </view>
      </view>
      <view class="footer_right" @tap="gotoUrl('../order/order')">立即报名</view>
    </view>
    <uv-popup ref="popupRef" @change="change" mode="bottom" round="30" closeable>
      <view class="pop_main">
        <view class="pop_main_title">
          购票人信息
        </view>
        <uv-form labelPosition="left" labelWidth="60" :model="popModel.userInfo" :rules="rules" ref="form">
          <uv-form-item label="姓名：" prop="name" borderBottom>
            <uv-input v-model="popModel.userInfo.name" placeholder="请输入" border="none">
            </uv-input>
          </uv-form-item>
          <uv-form-item label="电话：" prop="mobile" borderBottom>
            <uv-input v-model="popModel.userInfo.mobile" placeholder="请输入" border="none">
            </uv-input>
          </uv-form-item>
        </uv-form>
        <view class="pop_main_footer" @click="popHide">
          确定
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const popupRef = ref()

  const statusBarHeight = ref()
  const gotoUrl = (url : string) => {
    console.log(url)
    uni.navigateTo({
      url
    })
  }
  const popModel = reactive({
    userInfo: {
      name: '',
      mobile: '',
    }
  })
  const rules = {
    name: [{
      required: true,
      message: '此为必填字段',
      trigger: ['blur', 'change']
    }]

  }
  const gotoSecond = (url : string, query ?: string) => {
    uni.navigateTo({
      url: `/pages/mySecondary/${url}/${url}?${query ? query : ''}`
    })
  }
  const showModal = () => {
    popupRef.value.open()
  }
  const change = (e) => {
    console.log(e)
  }
  const popHide = () => {
    popupRef.value.close()
  }
  onLoad(async () => {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res)
        statusBarHeight.value = res.statusBarHeight
      }
    });
  })
</script>
<style lang="less" scoped>
  .container {
    height: 100%;
    background: #fff;

    .head {
      width: 750rpx;
      height: 420rpx;

      image {
        width: 750rpx;
        height: 420rpx;
      }
    }

    .headline {
      background-color: #fff;
      border-bottom: 1rpx solid rgba(#000, .1);
      padding: 50rpx 30rpx 30rpx;

      &_title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }

      &_des {
        font-size: 28rpx;
        color: #666666;
      }

      &_tag {
        display: flex;
        align-items: center;
        gap: 20rpx;
        padding: 20rpx 0;

        &_box {
          padding: 8rpx 10rpx;
          border-radius: 40rpx;
          font-size: 24rpx;
          color: #228CFE;
          border: 1px solid #228CFE;

        }
      }

      &_f {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_l {
          font-weight: bold;
          font-size: 32rpx;
          color: #FA4058;

          text {
            font-size: 24rpx;
          }
        }

        &_r {
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }


    .address {
      background-color: #fff;
      border-bottom: 1rpx solid rgba(#000, .1);
      padding: 40rpx 30rpx 30rpx;
      font-size: 24rpx;
      color: #666666;

      image {
        width: 38rpx;
        height: 38rpx;
        margin-right: 12rpx;
      }

      >view {
        display: flex;
        align-items: center;
      }

      &_head {
        margin-bottom: 20rpx;
      }

      &_footer {
        justify-content: space-between;

        &_l {
          display: flex;
          align-items: center;
        }

        &_r {
          color: #228CFE;
        }
      }
    }

    .user {
      padding: 30rpx;
      box-sizing: border-box;

      &_head {
        font-size: 36rpx;
        color: #333333;
      }

      &_des {
        font-size: 28rpx;
        color: #666666;
        line-height: 36rpx;
        margin: 20rpx 0 45rpx;
      }

      &_box {
        width: 690rpx;
        height: 154rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(0, 0, 0, 0.08);
        border-radius: 10rpx;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        &_head {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &_l {
            display: flex;
            align-items: center;
          }

          image {
            width: 36rpx;
            height: 36rpx;
            margin-left: 12rpx;
          }

          &_r {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #666666;

            text {
              color: #228CFE;
            }
          }
        }

        &_footer {
          font-size: 28rpx;
          color: #333333;
          display: flex;

          view {
            margin-right: 50rpx;
          }
        }
      }
    }


    .footer_fixed {
      display: flex;
      background-color: #fff;
      align-items: center;
      justify-content: space-between;
    }

    .footer_left {
      display: flex;

      >view {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        white-space: nowrap;
        color: #666666;
        margin: 0 22rpx;

        image {
          width: 34rpx;
          height: 31rpx;
          margin-bottom: 5rpx;
        }

        text {
          white-space: nowrap;
        }
      }
    }

    .footer_right {
      width: 460rpx;
      height: 68rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      text-align: center;
      line-height: 68rpx;
      font-size: 30rpx;
      color: #FFFFFF;

    }
  }

  .pop_main {
    width: 750rpx;
    height: 406rpx;
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    &_title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      height: 80rpx;
      display: flex;
      align-items: flex-end;
      padding-bottom: 16rpx;
      box-sizing: border-box;
    }

    :deep(.uv-form-item__body) {
      padding: 10px;
    }

    &_footer {
      width: 690rpx;
      height: 68rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      color: #fff;
      text-align: center;
      line-height: 68rpx;
      margin-top: 50rpx;
    }
  }
</style>